import React from 'react'
import "./index.css"
export default function Footer({ todoList, setTodoList }) {
   

    //勾选个数逻辑
    const code=()=>{
      return  todoList.reduce((p,c)=>(c.check)?p+1:p,0)
    }



    //全选回调函数逻辑
    const allListHandle = (e) => {
        const newTodoList = todoList.map(item => {
            return {...item, check:e.target.checked}
        })
        return setTodoList(newTodoList)
    }


    //全部删除按钮
    const deleteAll=()=>{
      const newList =  todoList.filter(item=>!item.check)
        return setTodoList(newList)
    }

    return (
        <div className="todo-footer">
            <label>
                <input type="checkbox" checked={code()===todoList.length&&todoList.length!==0?true:false} onChange={allListHandle} />
            </label>
            <span>
                <span>已完成{code()}</span> / 全部{todoList.length}
            </span>
            <button className="btn btn-danger" onClick={deleteAll}>清除已完成任务</button>
        </div>
    )
}
